<div class="portlet light bordered">
	<div class="portlet-title">
        <div class="caption font-dark">
            <i class="fa fa-cog font-dark"></i>
            <span class="caption-subject bold">修改</span>
        </div>
    </div>
    <div class="portlet-body form">
    	<form role="form" action="/userInfo/edit" class="form-horizontal" method="post">
    		<div class="form-body">
				<div class="form-group">
					<label class="control-label col-md-3">*手机号码：</label>
					<div class="col-md-7">
						<p class="form-control-static">$!userInfo.phone</p>
						<input type="hidden" value="$!userInfo.id" name="userInfo.id">
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-md-3">*用户名：</label>
					<div class="col-md-7">
						<p class="form-control-static">$!userInfo.id</p>
					</div>
				</div>
 				<div class="form-group">
 					<label class="control-label col-md-3">昵称:</label>
 					<div class="col-md-7">
						<input type="text" class="form-control" name="userInfo.nickname" value="$!userInfo.nickname"  maxlength="15" required>
					</div>
 				</div>
                 <div class="form-group">
                     <label class="control-label col-md-3">*性     别: </label>
                     <div class="col-md-7 form-control-static">
                     	<label class="mt-radio mt-radio-outline">男
							<input type="radio" #if($!userInfo.sex == "MAN") checked #end value="MAN" name="userInfo.sex" >
							<span></span>
						</label>
						<label class="mt-radio mt-radio-outline">女
							<input type="radio" #if($!userInfo.sex == "WOMAN") checked #end value="WOMAN" name="userInfo.sex">
							<span></span>
						</label>
                     </div>
                 </div>
 				<div class="form-group">
 					<label class="control-label col-md-3">真实姓名:</label>
 					<div class="col-md-7">
 						<input type="text" class="form-control" name="userInfo.realname" value="$!userInfo.realname"  required>
 					</div>
 				</div>
 				 <div class="form-group">
 					<label class="control-label col-md-3">出生日期:</label>
 					<div class="col-md-7">
 						<input class="form-control" type="text" name="userInfo.birthday"  placeholder="从身份证自动获取" id="birthday" value="$!userInfo.birthday"   readonly >
						<i class="fa fa-calendar" style="position: absolute;right: 10px;top: 10px"></i>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="control-label col-md-3">身份证号码:</label>
 					<div class="col-md-7">
 						<input type="text" class="form-control" id="idcard"  name="userInfo.idcard" value="$!userInfo.idcard" >
 					</div>
 				</div>
 				
 				
 				
 				
 				 <div class="form-group">
                	<label class="control-label col-md-3">推荐人:</label>
                    <div class="col-md-5">
                    		<select class="js-data-user-ajax form-control" name="userInfo.commendFriendId" required>
                     			<option value="$!userInfo.commendFriendId" selected></option> 
						 	</select>
                    	  
                    </div>
                </div>
                
                              <script type="text/javascript">
$.fn.modal.Constructor.prototype.enforceFocus = function () { };
</script>
                
                
 				<div class="form-group">
 					<div class="col-md-4"> 
 						<h4 class="text-success text-left"><strong>默认收货地址:</strong></h4>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="control-label col-md-3">收件人:</label>
 					<div class="col-md-7">
 						<input type="text" class="form-control" name="shippingInfo.receiver" value="$!shippingInfo.receiver" required>
 						<input type="hidden" value="$!shippingInfo.id" name="shippingInfo.id">
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="control-label col-md-3">联系电话:</label>
 					<div class="col-md-7">
 						<input type="text" class="form-control" maxlength="11" name="shippingInfo.phone" value="$!shippingInfo.phone" required>
 					</div>
 				</div>
 				 <div class="form-group">
 					<label class="control-label col-md-3">所在地区:</label>
 					<div class="col-md-7">
 						<div id="element_id" class="row"> 
 							<div class="col-md-4">
						  		<select name="shippingInfo.province" class=" form-control input-small province">
						  			 <option value="$!shippingInfo.province" selected>$!shippingInfo.province</option>
						  		</select>
						  	</div>
						  <div class="col-md-4">
							  <select  name="shippingInfo.city"  class=" form-control input-small city">
							  		<option value="$!shippingInfo.city" selected>$!shippingInfo.city</option>
							  </select>
						  </div>
						  <div class="col-md-4">
						  <select name="shippingInfo.county"   class=" form-control input-small area">
						  			<option value="$!shippingInfo.county" selected>$!shippingInfo.county</option>
						  </select>
						  </div>
						</div>
 					</div>
 				</div>
 				<div class="form-group">
 					<label class="control-label col-md-3">街道地址：</label>
 					<div class="col-md-7">
 						<input type="text" class="form-control" name="shippingInfo.address" value="$!shippingInfo.address" required>
 					</div>
 				</div>
			</div>
			<div class="form-actions right">
				<a href="javascript:;" thref="/userInfo/list" class="btn green ajax-post"><i class="fa fa-check"></i> 提交</a>
				<a href="javascript:;" data-dismiss="modal" class="btn btn-outline grey-salsa">返回</a>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
$('#element_id').cxSelect({
	  url: '/assets/plugins/cxSelect-master/js/cityData.min.json',               // 如果服务器不支持 .json 类型文件，请将文件改为 .js 文件
	  selects: ['province', 'city', 'area'],  // 数组，请注意顺序
	  emptyStyle: 'none'
	});
		
$("#idcard").blur(function(){
	  var target= $(this);
	  var bday = $("#birthday");
	  var card= target.val();
	  if (!( /^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X|x)?$/.test(card)) ){
		 //身份证验证失败
		  target.val("");
		  bday.val("");
		  toastr.warning("请输入正确身份证号码！");
	  }else{
	         if(card.length==15){ // 十五身份证
	        	var yera = card.substring(6,8); //年
	        	var month = card.substring(8,10);//月
	        	var day =  card.substring(10,12);//日
	        	
	        	var date = "19"+yera+"-"+month+"-"+day;
	        	bday.val(date);
	         }
	         if(card.length==18){ // 十八身份证
	        	var yera = card.substring(6,10); //年
	        	var month = card.substring(10,12);//月
	        	var day =  card.substring(12,14);//日
        	 
	        	var date =yera+"-"+month+"-"+day;
	        	bday.val(date);
	         }
		  
	  }
})
		
	function formatUser(repo) {
	  if (repo.loading) {
		    return repo.text;
	  }
	var markup = "<div class='select2-result-repository clearfix'>"
					+ "<div class='select2-result-repository__avatar'><img src= '"+repo.imageUrl+"' /></div>"
					+ "<div class='select2-result-repository__meta'>"
							+ "<div class='select2-result-repository__title'>" + repo.id+"</div>"
							+ "<div class='select2-result-repository__description'>"+ repo.realname + "</div>"
							+ "<div class='select2-result-repository__statistics'>"
							+ "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i>手机号 ： "+ repo.phone+ "</div>"
							+ "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i>  昵称  ："+ repo.nickname+ "</div>"
							+ "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i>最后登录时间："+(repo.lastLoginTime || "无记录时间 ") + "</div>"
							+"</div>"
						+"</div>"
					+"</div>";
	return markup;
}

function formatUser(repo) {
	  if (repo.loading) {
		    return repo.text;
	  }
	var markup = "<div class='select2-result-repository clearfix'>"
					+ "<div class='select2-result-repository__avatar'><img src= '"+repo.imageUrl+"' /></div>"
					+ "<div class='select2-result-repository__meta'>"
							+ "<div class='select2-result-repository__title'>" + repo.id+"</div>"
							+ "<div class='select2-result-repository__description'>"+ repo.realname + "</div>"
							+ "<div class='select2-result-repository__statistics'>"
							+ "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i>手机号 ： "+ repo.phone+ "</div>"
							+ "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i>  昵称  ："+ repo.nickname+ "</div>"
							+ "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i>最后登录时间："+(repo.lastLoginTime || "无记录时间 ") + "</div>"
							+"</div>"
						+"</div>"
					+"</div>";
	return markup;
}

function formatRepoSelection(repo) {
	if(repo.realname) {
		$('#realname').val(repo.realname) ;
	}
	if(repo.nickname) {
		$('#nickname').val(repo.nickname) ;
	}
	return   repo.id;
}

$(' .js-data-user-ajax').select2({
	ajax : {
		url : "userInfo/getRecommendUser?userId=$!userInfo.id",
		 dataType: 'json',
		delay : 250,
		async : false,
		data : function(params) {
			var term= params.term ; 
			var map = {};
			if(!isNaN(term)&&term.length != 0){
				map["id"] = parseInt(term); 
				map["phone"] = term; 
				if(parseInt(term) > 2147483647){
					delete va["id"];
				}
			}else{
				map["str"] = term; 
			}
			return {
				id: map["id"], 
				phone: map["phone"], 
				str:map["str"] ,
				pageNo : params.page||1
			};
		},
		processResults: function (data, params) {
		    params.page = params.page || 1;

		    return {
		        results: data.result,
		        pagination: {
		            more: (params.page * 10) < data.totalCount
		        }
		    };
		},
		cache : true
	},
	width : "off",
	escapeMarkup : function(markup) {
		return markup;
	},
	placeholder:'请选择',
	minimumInputLength : 1,
	language: "zh-CN",
	templateResult : formatUser,
	templateSelection : formatRepoSelection
});
</script>